<!DOCTYPE html>
<html>
<head>
    <title>动态口令</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/sweeralert.css">
    <script src="js/colorpicker.js"></script>
</head>
<body>
<!-- MENU ICON -->
<div id="menu-icon" class="menu-icon">
    <a title="Klik untuk membuka menu" href="#menu">
        <span class="linemenu"></span>
        <span class="linemenu"></span>
        <span class="linemenu"></span>
    </a>
</div>

<!-- MENU WINDOW -->
<div id="menu" class="menu">
    <ul class="menu-list">
        <div class="menu-close">
            <a title="Tutup menu" href="#" onclick=returnMain()>X</a>
        </div>
        <li><a id="menu-open-file" href="#">文件导入...</a></li>
        <li><a id="menu-open-qr" href="#">二维码导入...</a></li>
        <li><a id="menu-add" href="#add">手动添加...</a></li>
        <li><a id="menu-edit" href="#edit">手动编辑...</a></li>
        <li><a id="menu-import" href="#import">导出当前配置...</a></li>
        <li><a id="menu-help" href="#help">帮助</a></li>
    </ul>
</div>

<!-- EDITOR WINDOW -->
<div class="header">
    <h2 class="title text-center border-bottom">&#128274; 动态口令</h2>
</div>

<div class="items-container main pages">
</div>

<canvas id="qrcanvas" style="display: none"></canvas>

<!-- HIDDEN INPUT FILE -->
<input type="file" id="file-json-open-input" accept=".json" class="hide">
<input type="file" id="file-qr-open-input" accept=".png" class="hide">

<div class="help pages hide">
    <div class="item">
        <div class="menu-close">
            <a title="Tutup menu" href="#" onclick=returnMain()>X</a>
        </div>
        <h3 class="item-title">创建json文件</h3>
        <p class="item-desc">获取你的动态口令秘钥</p>
        <p class="item-desc">文件名称必须以.json结尾，下面给出文件内容demo</p>
        <pre>
            <code id="txt_demo">
            [
              {
                "provider": "Google",
                "description": "Main account",
                "secret": "I5XW6Z3MMUQG2YLJNYQGCY3D",
                "preSecret": "abc",
                "period": 30,
                "digits": 6,
                "indicatorColor": "#1DA1F2"
              },
              {
                "provider": "AWS",
                "description": "Root account (john@example.com)",
                "secret": "IFLVG4TPN52GCY3D",
                "period": 30,
                "digits": 6,
                "indicatorColor": "#B1A1F2"
              },
              {
                "provider": "Twitter",
                "description": "john@example.com",
                "secret": "KR3WS5DUMVZC4Y3PNVVG62DO",
                "period": 30,
                "digits": 6,
                "indicatorColor": "#1DA100"
              },
              {
                "provider": "Facebook",
                "description": "Foo account",
                "secret": "IZQWGZLCN5XWWLTD",
                "period": 60,
                "digits": 8,
                "indicatorColor": "#ff0000"
              }
            ]
        </code>
        </pre>
        <p class="item-desc">选择添加导入</p>
        <p class="item-desc">
        <pre>
"provider" 为口令名称
"description"  为口令描述
"secret" 为口令秘钥
"preSecret" 为口令显示前缀，例如生成的口令是1234556，自定义一个前缀abc，赋值出来就是abc123455，无前缀可不填
"indicatorColor"  为进度条颜色,目前仅支持hex16进制表示
"period" 为刷新时间
"digits"  为输出口令长度
        </pre>
        </p>
    </div>
</div>

<div class="edit pages hide">
    <div class="item">
        <div class="menu-close">
            <a title="Tutup menu" href="#" onclick=returnMain()>X</a>
        </div>
    </div>
    <div class="edit-container main pages">
    </div>
</div>


<script src="js/auth.js"></script>
<script src="js/jsQR.js"></script>
<script src="js/index.js"></script>
<script src="js/sweetalert2.all.min.js"></script>

</body>
</html>